<template lang="">
    <div class="get-from-bank">
        <div class="text-center bank-title">
            从题库中选择
        </div>
        <el-input placeholder="从题库中搜索" v-model="searchValue"></el-input>
        <div class="pad bank-list">
            <div v-for="item in quesList" :key="item.queId" class="form-item">
                <BankItem :item="item"></BankItem>
            </div>
            <div class="normal-color text-center get-more" v-show="!noMore" @click="getMore">加载更多</div>
            <div class="info-color text-center no-more" v-show="noMore">没有更多啦</div>
        </div>
    </div>
</template>
<script>
    import BankItem from './BankItem.vue'

    export default {
        name: 'BankForm',
        components: {
            BankItem,
        },
        data() {
            return {
                timer: '',
                searching: '',
                searchValue: '',
                pageSize: 8,
                noMore: false,
                quesList: [/* {
                    "quConid": 1,
                    "quQueid": 1,
                    "queId": 1,
                    "queQue": "这是标题这是标题这是标题这是标题",
                    "queType": "1",
                    "queOptionA": "A,V,B",
                    "queOptionB": "A,V,B",
                    "queOptionC": "A,V,B",
                    "queOptionD": "A,V,B",
                }, {
                    "quConid": 1,
                    "quQueid": 2,
                    "queId": 2,
                    "queQue": "22",
                    "queType": "0",
                    "queOptionA": "456",
                },{
                    "quConid": 1,
                    "quQueid": 1,
                    "queId": 1,
                    "queQue": "这是标题这是标题这是标题这是标题",
                    "queType": "1",
                    "queOptionA": "A,V,B",
                    "queOptionB": "A,V,B",
                    "queOptionC": "A,V,B",
                    "queOptionD": "A,V,B",
                }, */]
            }
        },
        watch: {
            searching() {
                this.pageSize = 8
            },
            searchValue(value) {
                if (value == '') {
                    this.searching = false
                    this.getQuestionBank()
                    clearInterval(this.timer)
                    return false
                }
                this.searching = true
                clearInterval(this.timer)
                this.timer = setTimeout(() => {
                    console.log('搜索');
                    this.searchByTitle(value)
                }, 1000);
            }
        },
        methods: {
            searchByTitle(value) {
                axios({
                    method: 'GET',
                    url: '/questionBank/getQuestionByTitle',
                    params: {
                        pageSize: this.pageSize,
                        start: 1,
                        title: value
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.quesList = result.data.data.list.length
                    if (result.data.total == result.data.size) {
                        this.noMore = true
                    }
                }).catch((err) => {
                    this.$message({
                        message: '搜索失败' + err.message,
                        type: 'info'
                    })
                });
            },
            getQuestionBank() {
                this.searching = true
                axios({
                    method: 'GET',
                    url: '/questionBank/selectAll',
                    withCredentials: true,
                    params: {
                        pageSize: this.pageSize,
                        start: 1
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.quesList = result.data.data.list
                    if (result.data.total == result.data.size) {
                        this.noMore = true
                    }
                }).catch((err) => {
                    this.$message({
                        message: '拉取题库列表失败' + err.message,
                        type: 'info'
                    })
                });
            },
            getMore() {
                this.pageSize += 8
                if (this.searching) {
                    this.searchByTitle(this.searchValue)
                } else {
                    this.getQuestionBank()
                }
            }
        },
        mounted() {
            this.getQuestionBank()
            this.$bus.$on('addQuesToBank',()=>{
                this.getQuestionBank()
            })
        },
    }
</script>
<style scoped>
    .bank-title {
        margin: 10px;
    }

    .form-item {
        cursor: pointer;
        width: 100%;
        border-bottom: 1px solid #DCDFE6;
    }

    .get-from-bank {
        overflow-y: auto;
    }

    .get-more {
        cursor: pointer;
    }

    .bank-list{
        max-height: calc(100vh - 525px);
        overflow: auto;
    }
</style>